<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas</title>
    <style></style>
  </head>
  <body>
    <!-- konva 舞台 -->
    <div id="container"></div>
    <script src="./asserts/konva.js"></script>
    <script>
      // 第一步 创建舞台
      const stage = new Konva.Stage({
        // id 为 container 的 dom 元素
        container: 'container',
        // 设置舞台宽高
        width: window.innerWidth,
        height: window.innerHeight,
      })

      // 第二步 创建层
      const layer = new Konva.Layer()

      // 第三步 层 添加到 舞台 上
      stage.add(layer)

      // 第四步 创建矩形
      const rect = new Konva.Rect({
        x: 100,
        y: 100,
        opacity: 0.4,
        rotation: 40,
        width: 100,
        height: 200,
        scaleX: 1.2,
        scaleY: 1.2,
        draggable: true,
        fill: 'orange',
      })

      // 第五步 把 矩形 添加到 层
      layer.add(rect)

      // 第六步 把 层 渲染到 舞台上
      layer.draw()
    </script>
  </body>
</html>
